<script lang="ts" setup>
import { ref, computed } from "vue";
// 导入图标工具
import { UploadFilled, Download, Delete, Search, Document, Folder } from "@/utils/icons.js";
// 导入消息工具
import message from "@/utils/message.js";

// 文件分类
const categories = ref([
    { id: 1, name: "企业资质" },
    { id: 2, name: "招聘资料" },
    { id: 3, name: "合同协议" },
]);

// 当前选中的分类
const activeCategory = ref(1);

// 文件列表
const files = ref([
    {
        id: 1,
        name: "营业执照.pdf",
        size: "2.5MB",
        type: "pdf",
        category: 1,
        uploadTime: "2025-05-10",
        canDownload: true,
        canDelete: true,
    },
    {
        id: 2,
        name: "招聘简章.docx",
        size: "1.2MB",
        type: "docx",
        category: 2,
        uploadTime: "2025-05-08",
        canDownload: true,
        canDelete: true,
    },
]);

// 搜索关键词
const searchQuery = ref("");

// 上传文件
const handleUpload = (file: File) => {
    console.log("上传文件:", file);
    files.value.push({
        id: files.value.length + 1,
        name: file.name,
        size: `${(file.size / 1024 / 1024).toFixed(1)}MB`,
        type: file.name.split(".").pop() || "",
        category: activeCategory.value,
        uploadTime: new Date().toISOString().split("T")[0],
        canDownload: true,
        canDelete: true,
    });
};

// 下载文件
const handleDownload = (id: number) => {
    const file = files.value.find((f) => f.id === id);
    if (file) {
        console.log("下载文件:", file.name);
        // 这里添加实际下载逻辑
        message.success(`开始下载文件: ${file.name}`);
    }
};

// 删除文件
const handleDelete = (id: number) => {
    message
        .confirm("确定要删除此文件吗?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
        })
        .then(() => {
            files.value = files.value.filter((f) => f.id !== id);
            message.success("文件删除成功");
        })
        .catch(() => {});
};

// 过滤文件列表
const filteredFiles = computed(() => {
    return files.value.filter((file) => {
        return (
            file.category === activeCategory.value && file.name.toLowerCase().includes(searchQuery.value.toLowerCase())
        );
    });
});
</script>

<template>
    <div class="file-manager-container">
        <div class="header">
            <h2>企业文件管理</h2>
            <div class="actions">
                <el-upload action="" :show-file-list="false" :auto-upload="false" :on-change="handleUpload">
                    <el-button type="primary" :icon="UploadFilled">上传文件</el-button>
                </el-upload>
            </div>
        </div>

        <div class="file-content">
            <div class="sidebar">
                <el-menu :default-active="activeCategory.toString()">
                    <el-menu-item
                        v-for="cat in categories"
                        :key="cat.id"
                        :index="cat.id.toString()"
                        @click="activeCategory = cat.id"
                    >
                        {{ cat.name }}
                    </el-menu-item>
                </el-menu>
            </div>

            <div class="main-content">
                <div class="search-bar">
                    <el-input v-model="searchQuery" placeholder="搜索文件" :prefix-icon="Search" />
                </div>

                <el-table :data="filteredFiles" style="width: 100%">
                    <el-table-column prop="name" label="文件名" width="200">
                        <template #default="{ row }">
                            <div class="file-name">
                                <el-icon v-if="row.type === 'pdf'"><Document /></el-icon>
                                <el-icon v-else-if="row.type === 'docx'"><Document /></el-icon>
                                <el-icon v-else><Folder /></el-icon>
                                <span>{{ row.name }}</span>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="size" label="大小" width="120" />
                    <el-table-column prop="uploadTime" label="上传时间" width="150" />
                    <el-table-column label="操作" width="180">
                        <template #default="{ row }">
                            <el-button
                                size="small"
                                :icon="Download"
                                @click="handleDownload(row.id)"
                                :disabled="!row.canDownload"
                            >
                                下载
                            </el-button>
                            <el-button
                                size="small"
                                :icon="Delete"
                                type="danger"
                                @click="handleDelete(row.id)"
                                :disabled="!row.canDelete"
                            >
                                删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
    </div>
</template>

<style scoped>
.file-manager-container {
    padding: 20px;
    background-color: #f8fafc;
    min-height: 100vh;
}

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #e2e8f0;
}

.file-content {
    display: flex;
    background: white;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.sidebar {
    width: 200px;
    border-right: 1px solid #e2e8f0;
}

.main-content {
    flex: 1;
    padding: 20px;
}

.search-bar {
    margin-bottom: 20px;
    width: 300px;
}

.file-name {
    display: flex;
    align-items: center;
    gap: 8px;
}

.el-menu {
    border-right: none;
}
</style>
